<template>
  <el-drawer
    :title="drawerTitle[drawerType]"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="beforeClose"
    @closed="clearDialog"
    custom-class="tag-drawer catalog-edit-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="140px" :rules="editFormRules" ref="editForm">
          <el-form-item label="标签体系名称：" prop="name">
            <el-col :span="12">
              <el-input placeholder="请输入标签体系名称" v-model="editForm.name"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="标签体系描述：" prop="cmntStr">
            <el-col :span="18">
              <el-input
                type="textarea"
                :rows="3"
                placeholder="请在此输入你的描述，总长度不超过500个字符"
                resize="none"
                :maxlength="500"
                :show-word-limit="true"
                v-model="editForm.cmntStr"
              >
              </el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="标签体系类型：" prop="catalogClassType">
            <el-col :span="18">
              <el-select v-model="editForm.catalogClassType" placeholder="请选择标签体系类型">
                <el-option label="---" value=""></el-option>
                <el-option
                  v-for="item in $dictList('catalog_type')"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>

          <!-- <el-form-item label="状态：" prop="enabled">
            <el-switch active-color="#13ce66" v-model="editForm.enabled" :active-value="1" :inactive-value="0">
            </el-switch>
          </el-form-item> -->

          <el-form-item label="归属部门：" prop="deptName">
            <span>{{ editForm.deptName }}</span>
          </el-form-item>

          <el-form-item label="发布范围：" prop="anncRangeCd">
            <el-col :span="24">
              <el-radio-group v-model="editForm.anncRangeCd">
                <el-radio v-for="dict in $dictList('catalog_annc_range')" :key="dict.key" :label="dict.key">{{
                  dict.value
                }}</el-radio>
              </el-radio-group>
            </el-col>
          </el-form-item>

          <div>
            <el-form-item label="创建时间：" prop="anncDt">
              <span>{{ editForm.anncDt }}</span>
            </el-form-item>

            <el-form-item label="创建人：" prop="anncer">
              <span>{{ $name(editForm, 'anncerNnm', 'anncer') }}</span>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="beforeClose()">取消</el-button>
      <el-button type="primary" size="medium" @click="submit('close')">保存并关闭</el-button>
      <el-button type="primary" size="medium" @click="submit('category')">保存并进入体系管理</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerType: 'add',
      drawerTitle: {
        add: '新增标签体系',
        edit: '编辑标签体系'
      },
      drawerVisible: false,
      editForm: {
        id: '',
        name: '',
        cmntStr: '',
        enabled: 1,
        deptName: '',
        anncRangeCd: 1,
        anncDt: '',
        anncer: '',
        anncerNnm: '',
        catalogClassType: ''
      },
      editFormRules: {
        name: [
          { required: true, message: '标签体系名称不能为空', trigger: 'blur' },
          { max: 30, message: '标签体系名称不能超过30个字符', trigger: 'blur' }
        ],
        // enabled: [{ required: true, message: '请选择启用状态', trigger: 'change' }],
        cmntStr: [{ max: 500, message: '标签体系描述不能超过500个字符', trigger: 'blur' }],
        catalogClassType: [{ required: true, message: '标签体系类型不能为空', trigger: 'change' }]
      }
    }
  },
  methods: {
    showDrawer(params) {
      this.drawerType = params.type
      if (this.drawerType === 'add') {
        this.editForm.deptName = this.$store.state.user.detailInfo.deptNm
      } else {
        this.editForm.id = params.data.catalogClassId
        this.editForm.name = params.data.catalogClassNm
        this.editForm.cmntStr = params.data.catalogClassDesc
        // this.editForm.enabled = params.data.enabled ? 1 : 0
        this.editForm.deptName = params.data.belongDeptNm
        this.editForm.anncRangeCd = params.data.anncRangeCd
        this.editForm.anncDt = params.data.anncDt
        this.editForm.anncer = params.data.anncer
        this.editForm.anncerNnm = params.data.anncerNnm
        this.editForm.catalogClassType = params.data.catalogClassType
      }
      this.drawerVisible = true
    },
    submit(type) {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          let params = {
            catalogClassNm: this.editForm.name,
            catalogClassDesc: this.editForm.cmntStr,
            enabled: this.editForm.enabled,
            anncRangeCd: this.editForm.anncRangeCd,
            catalogClassType: this.editForm.catalogClassType
          }
          if (this.drawerType === 'edit') {
            params.catalogClassId = this.editForm.id
          }
          this.$ajax({
            url: this.$ajax.setUrl('dcl/dclAssetCatalogClass'),
            method: this.drawerType === 'add' ? 'post' : 'put',
            data: this.$ajax.setData(params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.drawerVisible = false
              this.$emit('refresh')
              this.$message.success('操作成功')
              if (type === 'category') {
                this.$emit('category', data.data)
              }
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    beforeClose() {
      var close = true
      var msg = ''

      if (close) {
        this.drawerVisible = false
      } else {
        this.$confirm(msg)
          .then(() => {
            this.drawerVisible = false
          })
          .catch(() => {})
      }
    },
    clearDialog() {
      this.editForm = {
        id: '',
        name: '',
        cmntStr: '',
        enabled: 1,
        deptName: '',
        anncRangeCd: 1,
        anncDt: '',
        anncer: '',
        catalogClassType: ''
      }
      this.sys = false
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
    }
  }
}
</script>

<style lang="scss"></style>
